<script setup lang="ts">
import {allTitlesApi} from "@/api/allTitles";
import {computed, ref, unref} from "vue";
import {AllTitlesDto} from "@/type/allTitles";
import {allTitlesDict} from "@/dict/allTitles";
import {formatDate} from "@/utils/timeUtils";

const props = defineProps({
  selectTitleId: {
    type:[ Number,null],
    required: true
  }
});
const emits = defineEmits(['selectTitle']);

const data = ref<AllTitlesDto[]>([])
const showDate = computed(() => {
  const uds: number[] = []
  for (let i = 0; i < data.value.length; i++) {
    if (
      i === 0
      || (
        formatDate(new Date(data.value[i - 1].createTime!), 'YYYY-MM-DD')
        !== formatDate(new Date(data.value[i].createTime!), 'YYYY-MM-DD')
      )
    ) {
      uds.push(data.value[i].id)
    }
  }
  return uds
})
const dataLoading = ref(false)
const getData = async () => {
  dataLoading.value = true
  const res = await allTitlesApi.selectAll({})
  data.value = res
  dataLoading.value = false
}
getData()
const refresh = async () => {
  await getData()
}

const select = (item: AllTitlesDto) => {
  emits('selectTitle', item.id)
}

const dialogVisible = ref(false)
const form = ref(new AllTitlesDto())
const editTitle = (item: AllTitlesDto) => {
  form.value = JSON.parse(JSON.stringify(unref(item)))
  dialogVisible.value = true
}
const ok = () => {
  allTitlesApi.updateOne(form.value).then(res => {
    getData()
  }).finally(() => {
    cancel()
  })
}
const cancel = () => {
  dialogVisible.value = false
}

defineExpose({
  refresh
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="修改标题"
  >
    <el-form :model="form">
      <el-form-item :label="allTitlesDict.title">
        <el-input v-model="form.title" />
      </el-form-item>
      <div>
        <el-button type="primary" @click="ok">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-form>
  </el-dialog>

  <div class="el-dialogues">
    <div
      v-for="(item,index) in data"
      :key="item.id"
      @click="select(item)"
    >
      <div
        class="date"
        v-if="showDate.includes(item.id)"
      >
        {{ formatDate(new Date(item.createTime!), 'YYYY-MM-DD') }}
      </div>
      <div class="title" :class="props.selectTitleId===item.id?'selected':''">
        <span>{{ item.title }}</span>
        <span class="wjkfbawjkfb" @click="editTitle(item)">修改</span></div>
    </div>
  </div>
</template>

<style scoped>

.el-dialogues {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
  padding: 12px 0;
}

.el-dialogues .date {
  margin: 16px 0 8px;
  padding: 0 12px;
  color: #909399;
  font-size: 12px;
  line-height: 1.5;
}

.el-dialogues .title {
  cursor: pointer;
  transition: all 0.3s ease;
  color: #606266;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.5;
}

.el-dialogues .title > .wjkfbawjkfb {
  font-size: 12px;
  color: #409eff;
  display: none;
  padding: 2px 6px;
  border-radius: 3px;
  transition: all 0.2s;
}

.el-dialogues .title > .wjkfbawjkfb:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

.el-dialogues .title:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.el-dialogues .title:hover .wjkfbawjkfb {
  display: block;
}

.el-dialogues .title.selected {
  color: #409eff;
  background-color: #ecf5ff;
  font-weight: 500;
}
</style>